<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建函数式子组件
		// 函数式组件目前只能访问到组件三大属性之一的props,如果想要访问到state和refs（React高版本的hooks）
		function Person(props) {
			const { name, age, sex } = props
			return (
				<ul>
					<li>姓名:{name}</li>
					<li>性别:{sex}</li>
					<li>年龄:{age}</li>
				</ul>
			)
		}

		Person.propTypes = {
			name: PropTypes.string.isRequired, //限制name必传，且为字符串
			sex: PropTypes.string,//限制sex为字符串
			age: PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex: '男',//sex默认值为男
			age: 18 //age默认值为18
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))
	</script>
</body>

</html>